<template>
  <div id="setting">
    <a-button :loading="outing" type="danger" @click="showDeleteConfirm">登出</a-button>
  </div>
</template>

<script>
import Api from "@/api";
import $STORE from "@/store";
import $ROUTER from "@/router";
export default {
  name: "Setting",
  data() {
    return {
      outing: false
    };
  },
  computed: {},
  mounted() {},
  methods: {
    showDeleteConfirm() {
      const this_ = this;
      this_.outing = true;
      this.$confirm({
        title: "提示",
        content: "确认登出?",
        okText: "登出",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          Api.UserLogOut().then(res => {
            //  登出成功
            if (res.success) {
              //  清除 cookie
              Cookies.remove("token");
              //  更改登陆状态
              $STORE.commit("SET_USER_LOGINED", false);
              //  清除菜单
              $STORE.commit("SET_USER_MENUS", []);
              setTimeout(() => {
                $ROUTER.push({
                  path: "/login"
                });
                window.location.reload();
              }, 0);
            }
          });
          console.log("OK");
        },
        onCancel() {
          this_.outing = false;
          console.log("Cancel");
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
#setting {
  width: 100%;
}
</style>
